// ❤ 三、函数式组件做地址增删改查
import React, { useEffect, useState } from 'react'
import axios from "axios";

// 引入组件
import AddressList from '../../components/AddressList';
import AddressAlert from '../../components/AddressAlert';

function Publish(props) {
  const [addressList, setAddress] = useState([]); //地址列表数据
  const [visible, setVisible] = useState(false); //弹框默认隐藏
  const [title, setTitle] = useState("新增地址");
  const [item, setItem] = useState(""); //点击那一项的数据


  // 请求后端数据
  useEffect(() => {
    axios.get("/address").then(res => {
      setAddress(res.data)
    })
  }, [])

  // 1. 关闭弹框
  const onClose = () => {
    setVisible(false)
  }

  // 2. 点击弹框【提交】按钮，添加地址到列表页 

  // 在弹框中点击提交，将数据存到citys中，打印的数据如下：
  //  address: "4y4h"
  // citys: Array(3)
  // 0: {code: '130000', name: '河北省'}
  // 1: {code: '130200', name: '唐山市'}
  // 2: {code: '130203', name: '路北区'}
  // length: 3
  // name: "111"
  // phone: "12345"

  const addAddress = (values) => {
    addressList.push({
      ...values,
      id: new Date() * 1,
      province: values.citys && values.citys[0].name,
      city: values.citys && values.citys[1].name,
      area: values.citys && values.citys[2].name,
      isDefault: false, //是否选中
    })

    setAddress(addressList)
    // console.log("addAddress", addressList);
  }

  // 4.删除
  const delAddress = (id) => {
    addressList.forEach((item, index) => {
      if (item.id === id) {
        addressList.splice(index, 1)
      }
    })

    setAddress([...addressList])
  }

  // 3. 点击【编辑】 
  const openAlert = (item) => {
    setVisible(true); //打开弹窗
    setTitle("编辑地址");//修改弹窗标题
    setItem(item); //记录当前要编辑的那一项的数据
  }

  // 4.点击编辑之后提交数据 
  const editAddress = (values) => {
    console.log("编辑", values);
    // 在编辑的时候，使用【map】，因为map会修改原数组，而forEach,fliter都不会修改原数组 
    addressList = addressList.map(items => {
      if (items.id === item.id) {
        items = {
          ...items, //先把旧的数据进行解构，主要需要原来的id和isDefault,
          ...values, //把表单输入的每一项进行解构，主要是需要name,phone,address,
          province: values.citys && values.citys[0].name,//省市区格式与表单格式不一致，需要手动添加
          city: values.citys && values.citys[1].name,
          area: values.citys && values.citys[2].name,

        }
        return items;
      }
    })
    setAddress([...addressList])
  }


  return (
    <div>
      {/* 1. 列表渲染  */}
      <AddressList
        addressList={addressList}
        openAlert={openAlert} //点击编辑
        delAddress={delAddress} //点击删除
      ></AddressList>
      {/* 2. 新增编辑弹窗  */}
      <AddressAlert
        visible={visible}
        title={title}
        onClose={onClose} //关闭弹框函数
        addAddress={addAddress} //点击提交新增地址
        editAddress = { editAddress } //编辑提交
        Item={item}

      ></AddressAlert>


      <button onClick={() => {
        setVisible(true);  //点击弹框出现
        setTitle("新增地址");
        setItem({}); //清空存储的那一项
      }}>新增地址</button>
    </div>
  )
}

export default Publish